<template>
  <div class="cont">
    <div class="navigation">
      <ul>
        <li
          v-for="(item,index) in navList"
          :class="{'activeNav':navActive==index}"
          @click="navActive=index"
        >
          <a>{{item}}</a>
          <em v-if="index<3"></em>
        </li>
      </ul>
    </div>
    <div class="tabList">
      <ul v-for="index in 4" :class="{'hide':navActive != index-1}">
        <li
          v-for="childValue,keys,i in tabList[index-1]"
          :class="index"
          :key="childValue.id"
          @click="tabLi(childValue.title)"
        >
          <a class="title">{{childValue.title}}</a>
          <span class="tiem">{{childValue.date}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: ["综合", "资讯", "活动", "公告"],
      navActive: 0,
      tabList: "",
      breadcrumb: ""
    };
  },
  created() {
    this.breadcrumb = this.$route.query.breadcrumb;
    this.$ajax.get("../../../../static/data.json").then(
      res => {
        this.tabList = res.data.tabList;
        console.log("列表", this.tabList);
      },
      reject => {
        console.log("请求失败", reject);
      }
    );
  },
  methods: {
    tabLi(title) {
      console.log("列表文字：" + title);
      let _breadcurumb = this.$emit(
        "breadcurmb",
        "游戏公告",
        "游戏中心",
        "tabList"
      );
      this.$router.push({
        path: "details",
        query: { breadcrumb: this.breadcrumb, title: title }
      });
    }
  }
};
</script>
